<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  table tr td {
    width: 100px;
    height: 40px;
    border: 2px solid gainsboro;
    text-align: center;
    line-height: 40px;
  }

  table {
    margin: 20px auto;
    border-collapse: collapse;
  }

  h4 {
    font-size: 22px;
    text-indent: 33em;
  }

  table tr th {
    width: 100px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border: 2px solid gainsboro;
    background-color: gainsboro;
  }
</style>

<body>

  <script>
    let students = [
      { name: '小米', age: 18, gender: '男', address: '河北' },
      { name: '小华', age: 18, gender: '男', address: '江西' },
      { name: '小萝莉', age: 18, gender: '女', address: '上海' },
      { name: '小美女', age: 18, gender: '女', address: '北江' },
    ]
    document.write('<h4>学生列表</h4>');
    document.write('<table class="one">');
    document.write(`
<tr>
  <th>序号</th>
  <th>姓名</th>
  <th>性别</th>
  <th>家乡</th>
</tr>
`);
    for (let i = 0; i < students.length; i++) {
      document.write(`
  <tr>
    <td>${i + 1}</td>
    <td>${students[i].name}</td>
    <td>${students[i].gender}</td>
    <td>${students[i].address}</td>
  </tr>
  `);
    }
    document.write('</table>');
    //dcz
  </script>
</body>

</html>